<template>
  <div class="shop-apply-box page" ref="webview">
    <van-nav-bar title="商家申请入驻" class="bg_white" left-arrow @click-left="$router.go(-1)" />
    <div class="content">
      <div class="input">
        <van-field label="商家姓名" v-model="apply.shopkeeper" type=" text " placeholder="请输入你的姓名" />
      </div>
      <div class="input">
        <van-field label="手机号" v-model="apply.telephone" type=" text " placeholder="请输入你的手机号" />
      </div>
      <div class="input">
        <van-field label="申请备注" v-model="apply.remark" rows="5" autosize type="textarea" placeholder="输入申请备注" />
      </div>
    </div>
    <div class="addCard ">
      <van-button color="#ff0034 " class="btn " :loading="isLoading " @click.native="shopApply">立即申请</van-button>
    </div>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'shopApply',
  data () {
    return {
      rateValue: 1,
      message: '',
      showPreview: false,
      images: [],
      form: {
        frontImg: ''
      },
      frontImgList: [],
      isFrontLoading: false,
      apply: {
        telephone: '',
        shopkeeper: '',
        remark: ''
      },
      isLoading: false
    };
  },
  mixins: [mixins],
  computed: {
    isApp: {
      get () {
        return !!localStorage.getItem('isApp') || !!this.$route.query.isApp;
      }
    }
  },
  created () {
  },
  methods: {
    // 立即申请
    shopApply () {
      if (this.isLoading) {
        return;
      }
      if (this.apply.shopkeeper === '') {
        this.$toast('请填写商家姓名');
        return;
      }
      if (this.apply.telephone === '') {
        this.$toast('请填写手机号');
        return;
      }
      let disabled = !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.apply.telephone));
      if (disabled) {
        this.$toast('请输入正确的手机号!');
        return;
      }
      if (this.apply.remark === '') {
        this.$toast('请填写申请备注');
        return;
      }
      let params = {
        ...this.apply
      };
      this.isLoading = true;
      this.$API.store.shopApply(params).then(res => {
        if (!res.code) {
          this.$router.push({ 'path': '/prompt', query: { type: 2 } });
        } else {
          this.$toast(res.message);
        }
        this.isLoading = false;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.shop-apply-box {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .content {
    flex: 1;
    overflow: auto;
    .input {
      padding: 0 30px 30px;
      .van-field {
        padding: 30px 27px;
        border-radius: 8px;
        background-color: #f9f9f9;
      }
    }
  }
  .addCard {
    color: #fff;
    font-size: 32px;
    text-align: center;
    padding: 30px;
    .btn {
      width: 100%;
      border-radius: 10px;
    }
    .van-button__text {
      color: #fff;
      font-size: 32px;
      &::before {
        display: inline-block;
        font-size: 40px;
        margin-right: 10px;
      }
    }
  }
}
</style>
